<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>computed_watch的比较</title>
		<script src="./js/vue.js"></script>
	</head>
	<body>
		<!--
		computed和watch之间的区别
		1.computed能完成的功能,watch都可以完成
		2.watch能完成的功能,computed不一定能完成,例如watch可以进行异步操作
		两个重要的小原则:
		1.所被Vue管理的函数,最好携程普通函数,这样this的指向才是vm或者组件实例对象
		2.所有不被Vue所管理的函数(定时器的回调函数,ajax的回调函数等,Promise的回调函数),最好写成箭头函数,
		这样this的指向才是vm或组件实例对象
		-->
		<div id="root">
			<input type="text" v-model="firstName" /><br />
			<input type="text" v-model="lastName" /><br />
			全名:<span>{{fullName}}</span>
		</div>
		<script>
			Vue.config.productionTip = false;
			const vm = new Vue({
				el:'#root',
				data:{
					firstName:'张',
					lastName:'三',
					fullName:'张-三'
				},
				watch:{
					firstName(){
						setTimeout(() => {
							this.fullName = this.firstName + '-' +this.lastName;
						},1000);
					}
				}
				// computed:{
				// 	fullName(){
				// 		return this.firstName + '-' +this.lastName;
				// 	}
				// },
			});
		</script>
	</body>
</html>